<template>
    <div class="white-box">
        <div class="table-mb">
            <!-- <el-button type="primary" plain :icon="Delete" @click="allDel">批量删除</el-button> -->
            <el-button type="primary" :icon="CirclePlus" @click="addClass">添加</el-button>
        </div>

        <el-table class="table-mb" v-loading="loading" :data="arr_data" :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="cate_id"
            @selection-change="handleAllSelected">
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column prop="name" label="会员等级" width="100"></el-table-column>
            <el-table-column prop="consumption_amount" label="消费金额" min-width="180">
				<template #default="{ row }">
				    <div>
						￥{{row.consumption_amount}}
					</div>
				</template>
			</el-table-column>
            <el-table-column prop="class_discount" label="等级折扣">
				<template #default="{ row }">
				    <div>
						{{row.class_discount}}折
					</div>
				</template>
			</el-table-column>
            <el-table-column label="操作" width="240" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" class="theme-btn" @click="clickEdit(row)">编辑
                    </el-button>
                    <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消"
                        @confirm="clickDel(row)">
                        <template #reference>
                            <el-button link type="primary" class="theme-btn">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
            :total="totalNums" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- 添加/编辑 -->
        <el-dialog v-model="dialogClass" :title="classType == 1 ? '添加等级' : '编辑等级'" width="540px" :append-to-body="true"
            :destroy-on-close="true" :close-on-click-modal="false" @close="closeAddClass">
            <el-form ref="ruleClassRef" :model="ruleClassForm" :rules="ruleCheckClass" label-width="120px">
                
                <el-form-item label="等级名称" prop="name">
                    <el-input v-model.trim="ruleClassForm.name" clearable placeholder="请输入等级名称" />
					
                </el-form-item>
                <el-form-item label="消费金额" prop="consumption_amount">
                    <el-input-number v-model="ruleClassForm.consumption_amount" :min="1" @change="handleChange" />
					<div class="contentText">累计消费{{ruleClassForm.consumption_amount}}元升到{{ruleClassForm.name}}</div>
                </el-form-item>
                <el-form-item label="会员折扣" prop="class_discount" required>
                    <el-input-number v-model="ruleClassForm.class_discount" :step="0.01" :min="0" :max="10" @change="handleChange" />
					<div class="contentText">{{ruleClassForm.name}}有{{ruleClassForm.class_discount}}折折扣</div>
                </el-form-item>
                <el-form-item>
                    <div class="flexs" style="margin-top: 30px">
                        <el-button type="primary" :loading="form_loading" @click="submitClassForm(ruleClassRef)">
                            {{ classType == 1 ? "确认添加" : "确认修改" }}
                        </el-button>
                        <el-button @click="resetClassForm(ruleClassRef)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, reactive, onBeforeUnmount } from "vue"
import OneLoad from "@mixins/one-load"
import { Delete, CirclePlus } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList();
})
//清除
onBeforeUnmount(() => {
    
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pageSize.value = val
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("admin/membershipLevel/list", params)
}

/**
 * 添加/编辑
 * @param {Boolean} dialogClass 添加/编辑弹窗状态
 * @param {Boolean} form_loading 提交按钮状态
 * @param {Number} classType 弹窗类型，1是添加，2是编辑
 * @param {Array} ruleClassRef 表单规则
 * @param {Object} ruleClassForm  表单字段
 * @param {Object} ruleCheckClass  表单提示
 * @param {Function} submitClassForm 提交表单
 * @param {Function} addClass 添加分类
 * @param {Function} closeAddClass 关闭弹窗
 */
const dialogClass = ref(false)
const form_loading = ref(false)
const classType = ref(1)
const ruleClassRef = ref(null)
const ruleClassForm = reactive({
    name: "",
	consumption_amount: "",
   class_discount: "",
})
const ruleCheckClass = reactive({
    name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
})
const submitClassForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                name: ruleClassForm.name,
                consumption_amount: ruleClassForm.consumption_amount,
                class_discount: ruleClassForm.class_discount,
            }
            if (classType.value == 2) {
                data.mlId = ruleClassForm.mlId
            }

            let url = classType.value == 1 ? "admin/membershipLevel/add" : "admin/membershipLevel/update"
            proxy.$axios
                .post(url, data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        dialogClass.value = false
                        
                        pubParams(getList)
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetClassForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const addClass = () => {
    dialogClass.value = true
    classType.value = 1
}
const closeAddClass = () => {
    dialogClass.value = false
    resetClassForm(ruleClassRef.value)
}
// 编辑
const clickEdit = (row) => {
    dialogClass.value = true
    setTimeout(() => {
        ruleClassForm.name = row.name
        ruleClassForm.mlId = row.mlId
        ruleClassForm.consumption_amount = row.consumption_amount
        ruleClassForm.class_discount = row.class_discount
        classType.value = 2
    }, 50);
}
// 删除单个
const clickDel = (row) => {
    proxy.$axios
        .get("admin/membershipLevel/delete", {
            params:{
				mlId: row.mlId,
			}
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => { })
}



</script>
<script>
export default {
    name: "NewsClass",
}
</script>

<style lang="less" scoped>
	.contentText{
		color: #8F95A5;
		margin-left: 20px;
	}
</style>